<template>
  <div>
    <div id="container"></div>
  </div>
</template>
<script>
import * as THREE from 'three'
import {OrbitControls} from "three/addons/controls/OrbitControls";
//课程案例源码里面配置的路径
import { Octree } from 'three/examples/jsm/math/Octree.js';
import { OctreeHelper } from 'three/addons/helpers/OctreeHelper.js';
// import { Capsule } from 'three/addons/math/Capsule.js';

import posx from "../../public/static/images/sky/posx.jpg";
import negx from "../../public/static/images/sky/negx.jpg";
import negz from "../../public/static/images/sky/negz.jpg";
import posz from "../../public/static/images/sky/posz.jpg";
import posy from "../../public/static/images/sky/posy.jpg";
import negy from "../../public/static/images/sky/negy.jpg";
// import {GLTFLoader} from "three/addons/loaders/GLTFLoader";

let scene;
export default {
  name: "agv-single",
  data() {
    return{
      camera:null,
      cameraCurve:null,
      renderer:null,
      container:null,
      controls:null,
      wallHeight:30,//墙壁的高度
      floor:{ //设置地板的宽高厚
        floorLength:300,floorWidth:300,floorDepth:1
      },
    }
  },
  methods:{
    initScene(){
      scene = new THREE.Scene();
      const axesHelper = new THREE.AxesHelper( 100 );
      axesHelper.position.set(0,0,10)
      scene.add( axesHelper );
    },
    initCamera(){
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera.position.set(100,100,100);
      this.camera.up.set(0, 0, 1);   // <=== spin // around Z-axis
    },
    initLight(){
      //添加两个平行光
      const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight1.position.set(-300,-300,600)
      scene.add(directionalLight1);
      const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight2.position.set(600,200,600)
      scene.add(directionalLight2);
    },
    addSkybox() {
      let loader = new THREE.CubeTextureLoader();// 创建一个CubeTextureLoader
      let texture = loader.load([ // 加载天空盒子的六个面的图像
        posx, // 底部面的图像
        negx, // 右侧面的图像
        negz, // 后侧面的图像
        posz, // 前侧面的图像
        posy, // 左侧面的图像
        negy, // 顶部面的图像
      ]);
      // 将天空盒子应用到场景的背景中
      scene.background = texture;
      // 创建一个立方体并添加到场景中
      let skybox = new THREE.Mesh(new THREE.BoxGeometry( 2500, 2500, 2500 ));
      skybox.position.set(0,0,0)
      skybox.position.z += 700;
      scene.add(skybox);
    },
    initFloor(){
      let floorGeometry = new THREE.BoxGeometry( this.floor.floorLength,this.floor.floorWidth,this.floor.floorDepth);
      let cubeMaterial = new THREE.MeshPhysicalMaterial({color:'#CCCCCC'});
      let floor = new THREE.Mesh( floorGeometry, cubeMaterial );
      floor.name = '地板';
      scene.add(floor)
    },
    //初始化墙壁
    createCubeWall(){
      let materialTie = [];
      materialTie.push(new THREE.MeshPhongMaterial({color: 0xafc0ca}));  //前  0xafc0ca :灰色
      materialTie.push(new THREE.MeshPhongMaterial({color: 0x9cb2d1}));  //后  0x9cb2d1：淡紫
      materialTie.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec}));  //上  0xd6e4ec： 偏白色
      materialTie.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec}));  //下
      materialTie.push(new THREE.MeshPhongMaterial({color: 0xafc0ca}));  //左   0xafc0ca :灰色
      materialTie.push(new THREE.MeshPhongMaterial({color: 0xafc0ca}));  //右

      let wallList = []
      let wall1 = {width:this.floor.floorLength, height:3, depth:this.wallHeight, angle:0, matArrayB:materialTie, x:0, y:-this.floor.floorWidth/2, z:this.wallHeight/2, name:"墙面"};
      let wall2 = {width:this.floor.floorLength, height:3, depth:this.wallHeight, angle:1, matArrayB:materialTie, x:0, y:this.floor.floorWidth/2, z:this.wallHeight/2, name:"墙面"};
      let wall3 = {width:this.floor.floorWidth, height:3, depth:this.wallHeight, angle:1.5, matArrayB:materialTie, x:-this.floor.floorLength/2, y:0, z:this.wallHeight/2, name:"墙面"};
      let wall4 = {width:this.floor.floorWidth, height:3, depth:this.wallHeight, angle:1.5, matArrayB:materialTie, x:this.floor.floorLength/2, y:0, z:this.wallHeight/2, name:"墙面"};
      wallList.push(wall1);wallList.push(wall2);wallList.push(wall3);wallList.push(wall4);
      for(let i=0;i<wallList.length;i++){
        let cubeGeometry = new THREE.BoxGeometry(wallList[i].width, wallList[i].height, wallList[i].depth);
        let cube = new THREE.Mesh(cubeGeometry, wallList[i].matArrayB);
        cube.position.x = wallList[i].x;
        cube.position.y = wallList[i].y;
        cube.position.z = wallList[i].z;
        cube.rotation.z += wallList[i].angle * Math.PI; //-逆时针旋转,+顺时针
        cube.name = wallList[i].name;
        scene.add(cube);
      }
    },
    initHouse(){
      const worldOctree = new Octree();
      let geometry = new THREE.BoxGeometry(15,10,10)
      let cubeMaterial = new THREE.MeshPhysicalMaterial({color:'#1c32b5',metalness: 0.5,transparent: false,});
      let mesh = new THREE.Mesh(geometry, cubeMaterial);
      mesh.position.set(5,0,0)
      scene.add(mesh)
      worldOctree.fromGraphNode(mesh);
      const helper = new OctreeHelper( worldOctree );
      scene.add( helper );
    },
    initRenderer(){
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.container = document.getElementById("container")
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
      this.renderer.setClearColor('#AAAAAA', 1.0);
      this.container.appendChild(this.renderer.domElement);
    },
    initControl(){
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
      this.controls.maxPolarAngle = Math.PI / 2.2;      // // 最大角度
    },
    initAnimate() {
      requestAnimationFrame(this.initAnimate);
      this.renderer.render(scene, this.camera);
    },
    initPage(){
      this.initScene();
      this.initCamera();
      this.initLight();
      this.initRenderer();
      this.initControl();
      this.addSkybox();
      this.initFloor();
      this.createCubeWall();
      this.initHouse();
      this.initAnimate();
    }
  },
  mounted() {
    this.initPage()
  }
}
</script>

<style scoped>
#container{
  position: absolute;
  width:100%;
  height:100%;
  overflow: hidden;
}

</style>
